<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h5>v-model和v-for的使用</h5>
        <!-- 
            当v-model被应用于v-for指令中且操作的变量为循环的临时变量需要注意如下两种情况
                1、临时变量为基本数据类型，直接操作无响应式，需通过下标完成引用操作改变
                2、临时变量为引用数类型，可以直接操作，具有响应式
        -->
        <ul>
            <li v-for="(item,i) in arr">
                <span>{{ item }}:</span>
                <input type="text" v-model="item">
                <input type="text" v-model="arr[i]">
            </li>
        </ul>
        <ul>
            <li v-for="item in arr2">
                <span>{{ item.name }}:</span>
                <input type="text" v-model="item.name">
            </li>
        </ul>

        <h5>案例</h5>
        <ul>
            <li v-for="item in arr3">
                <div v-if="item.isEdit">
                    <input type="text" v-model="item.name">
                    <input type="button" value="完成" @click="item.isEdit=false">
                </div>
                <div v-else>
                    <span>{{ item.name }}</span>
                    <input type="button" value="编辑" @click="item.isEdit=true">
                </div>
            </li>
        </ul>
    </div>
    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    arr:[
                        "aaaa",
                        "bbbb",
                        "cccc"
                    ],
                    arr2:[
                        { name:"aaaa" },
                        { name:"bbbb" },
                        { name:"cccc" }
                    ],
                    arr3:[
                        { name:"aaaa",isEdit:false },
                        { name:"bbbb",isEdit:false },
                        { name:"cccc",isEdit:false }
                    ]
                }
            }
        }).mount("#app")
    </script>
</body>
</html>